<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM操作</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            padding: 20px;
            border: 1px solid #000;
        }
        .box{
            margin: 20px auto;
        }
        .box_child{
            background: #58bc58;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>
            <div class="box_third">
                <div></div>
                <div class="box_child"></div>
                <div></div>
            </div>
        </div>
    </div>
    <button>克隆</button>

    <script src="./js/jquery.3.5.1.js"></script>
    <script>
        $(function(){
            // 1.增
            // 1.1 尾增
            /* var $new1 = $('<div>new_append</div>')
            $('.box_third').append($new1); */
            var $new1 = $('<div>new_appendTo</div>');
            ($new1).appendTo('.box_third');

            // 1.2 头增
            /* var $new2 = $('<div>new_prepend</div>');
            $('.box_third').prepend($new2); */
            var $new2 = $('<div>new_prependTo</div>');
            ($new2).prependTo('.box_third');

            // 1.3 同级前增
            var $new3 = $('<div>new_before</div>');
            $('.box_child').before($new3);

            // 1.4 同级后增
            var $new4 = $('<div>new_after</div>');
            $('.box_child').after($new4);

            // 1.5 克隆
            $('button').click(function(){
                // 克隆当前按钮
                var $new5 = $(this).clone(true);
                // console.log($('button'));
                $('body').append($new5);
            })

            // 2 改之wrap
            // 2.1 wrap和unwrap：一般配合使用
            $('.box').wrap('<div class="wrap"></div>');
            $('.box').unwrap();

            // 2.2 选中的所有选择器外包裹标签
            /* $('.box_third>div').wrapAll('<div class="wrap"></div>'); */

            // 2.3 指定选择器内部最外层添加标签
            /* $('.box_third').wrapInner('<div class="wrap"></div>'); */
            /* 这里的2.2和2.3效果等同 */

            // 3 改之content
            // 3.1.1 获取标签结构在内的内容
            console.log($('.box_third').html());
            // 3.1.2 设置标签结构在内的内容
            $('.box_child').html('<div class="html">html新增</div>')
            // 3.2.1 只获取文本内容
            console.log($('.box_third').text());
            // 3.2.2 只设置文本内容，结构标签会被解析成文本
            $('.box_child').prev().prev().text('<div class="html">html新增</div>')
            // 3.3
            $('.box_child').next().next().append('<div class="append">append新增</div>')

            // 4.查
            // 4.1.1 父级
            /* $('.box_child').parent().css({
                backgroundColor:'red'
            }) */

            // 4.1.2 祖父级：注意加限制选择器
            /* $('.box_child').parents('div').css({
                backgroundColor:'blue'
            }) */

            // 4.1.3 截止至指定祖父级(不包含指定标签)
            /* $('.box_child').parentsUntil('body').css({
                backgroundColor:'blue'
            }) */

            // 4.2.1 直属子级
            /* $('.box_third').children().css({
                backgroundColor:'pink'
            }) */
            // 4.2.2 所有后代
            /* $('.box').find('div').css({
                color:'blue'
            }) */

            // 4.3.1 上一个同级
            /* $('.box_child').prev().css({
                color:'blue'
            }) */

            // 4.3.2 上所有个同级
            /* $('.box_child').prevAll().css({
                color:'blue'
            }) */
            
            // 4.3.3 截止至前面指定同级兄弟
            /* $('.box_child').prevUntil('div:eq(3)').css({
                backgroundColor:'blue'
            }) */

            // 4.3.4 下一个同级
            /* $('.box_child').next().css({
                color:'blue'
            }) */

            // 4.3.5 所有同级
            /* $('.box_child').siblings().css({
                color:'blue'
            }) */

            // 5 删
            /* $('.box_child').remove(); */

        })
    </script>
</body>
</html>